<template>
	<view class="schedling">
		<view class="nav">
			<uni-nav-bar title="电影" backgroundColor="transparent" left-icon="left" @clickLeft="goback">
				
			</uni-nav-bar>
		</view>
		
		<view class="cinema flex_r_between" @click="toChooseCinema">
			<view class="box">
				<view class="name">
					<view class="hidden">{{data.cinemaName || ''}}</view>
				</view>
				<view class="address">
					<view class="hidden">{{data.cinemaAddress || ''}}</view>
					<text>{{distanceText}}</text>
				</view>
			</view>
			
			<view class="tag">
				<view @click.stop="toMap" class="flex_c" style="border-right: 1rpx solid #E8E8E8;">
					<image src="/static/film/location_icon.png" style="width: 31rpx;"></image>
					<text>地图</text>
				</view>
				<view @click.stop="$util.makeCall(data.tel)" class="flex_c">
					<image src="/static/film/call_icon.png"></image>
					<text>电话</text>
				</view>
			</view>
		</view>

		<view class="filmDetail">
			<view class="banner">
				<image class="movie_bg" :src="movieImg" mode="aspectFill"></image>
				<swiper previous-margin="240rpx" next-margin="240rpx" @change="swiperchange" :current="current"  :interval="3000" :duration="1000">
				    <swiper-item v-for="(item,index) in detail" :key="index" @click="toFilmDetail(item,index)">
				        <view style="width: 180rpx;height: 245rpx;" :class="['swiper-item',index==current ? 'active' : '']">
							<image :src="item.pic" style="width: 100%;height: 100%;" mode="aspectFill"></image>
				        </view>
				    </swiper-item>
				</swiper>
				<i class="custer"></i>
			</view>

			
		</view>
		
		<view class="film_text_box" @click="toFilmDetail(movieInfo,current)">
			<view class="film_name">{{movieName || ''}}
				<text>{{movieGrade}} <i>分</i> </text>
			</view>
			<view class="film_text hidden">
				<text class="hidden" style="flex: 1;">{{movieInfo.duration}}分钟 | {{movieInfo.filmTypes}} | {{movieInfo.leading_role}}</text>
				<uni-icons type="forward" color="#8D8D8D" size="16"></uni-icons>
			</view>
		</view>
		
		<scroll-view scroll-x="true" style="width: 100%;">
			<view class="date_tab" :style="`width: ${170*dataList.length}rpx;`">
				<view v-for="(item,index) in dataList" :key="index" :id="date == item.show_time ? 'select' :''" @click="onDateChange(item.show_time)">
					<text>{{item.show_text}}</text>
					<uni-dateformat :date="item.show_time" format="MM-dd"></uni-dateformat>
				</view>
			</view>
		</scroll-view>

		<view class="list">
			<blankPage img="https://qiniu-cdn.maeiyun.com/imgs/blank/no_order.png" :text="`${dataList.length ? dataList[0].show_time : ''}上映`" :width="161" :height="129" v-show="filmShowList.length == 0"></blankPage>
			<view class="item" v-for="(item,index) in filmShowList" :key="index">
				<view class="left">
					<view class="top">
						<view>
							<uni-dateformat :date="item.showTime" format="hh:mm"></uni-dateformat>
						</view>
						<text>{{item.language || ''}} {{item.showVersionType || ''}}</text>
					</view>
					<view class="bottom">
						<view><uni-dateformat :date="item.letOutTime" format="hh:mm"></uni-dateformat>散场</view>
						<text>{{item.hallName}}</text>
					</view>
				</view>
				<view class="right">
					<text>￥{{item.downSalePrice}}起</text>
					<view style="margin-left: 10rpx;" @click="toDetail(item)">购票</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				

				moveParams: {
					scrollLeft: 0
				},

				date: '',
				
				current:0,
				
				
				movieName:'',
				movieGrade:0,
				movieImg:'',
				movieInfo:{},
				filmId:0,
				
				detail:[],
				
				data:'',
				
				dataList:[
					
				],
				filmShowList:[],
				distanceText:'',
			}
		},
		methods: {
			goback(){ uni.navigateBack() },
			toDetail(e) {
				uni.navigateTo({
					url: '/otherpages/film/seat?showid=' + e.showId + '&cinemaName=' + this.data.cinemaName + '&cinemaId=' + this.data.cinemaId + "&cinemaAddress=" + this.data.cinemaAddress
				})
			},
			toFilmDetail(e,index){
				if(index==this.current){
					uni.navigateTo({
						url: '/otherpages/film/filmDetail?data=' + JSON.stringify(e)
					})
				}else {
					this.current = index
				}
				
			},
			onDateChange(e) {
				this.date = e
				this.filmShowList = []
				this.getFilmShowListTab()
			},
			
			swiperchange(e) {
			    this.current=e.detail.current
				this.movieName = this.detail[this.current].name
				this.movieGrade = this.detail[this.current].grade
				this.movieImg = this.detail[this.current].pic
				this.filmId = this.detail[this.current].filmId
				this.movieInfo = this.detail[this.current]
				this.filmShowList = []
				this.getFilmShowList()
			},
			
			getDetail(e){
				this.request.httpTokenRequest({
					url: "movie/getCinemaFilms",
					method: "get"
				}, {
					cinemaId:this.id
				}).then(res => {
					if (res.code == 0) {
						this.detail = res.data.filmList
						this.data = res.data.cinemaInfo
						this.detail.forEach((item, index) => {
							if(e == item.filmId){
								this.current = index
							}
						});
						this.movieName = this.detail[this.current].name
						this.movieGrade = this.detail[this.current].grade
						this.movieImg = this.detail[this.current].pic
						this.filmId = this.detail[this.current].filmId
						this.movieInfo = this.detail[this.current]
						this.getFilmShowList()
					}else {
						this.$util.msg(res.msg)
					}
				}, error => {})
			},
			
			// 切轮播 不传日期
			getFilmShowList(){
				this.request.httpTokenRequest({
					url: "movie/getFilmShowList",
					method: "get"
				}, {
					cinemaId:this.id,
					filmId:this.filmId,
				}).then(res => {
					if (res.code == 0) {
						this.filmShowList = res.data.showList
						this.dataList = res.data.schedules
						this.date = res.data.schedules[0].show_time
					}else {
						this.$util.msg(res.msg)
					}
				}, error => {})
			},
			
			// 切日期 传日期
			getFilmShowListTab(){
				this.request.httpTokenRequest({
					url: "movie/getFilmShowList",
					method: "get"
				}, {
					cinemaId:this.id,
					filmId:this.filmId,
					date:this.date
				}).then(res => {
					if (res.code == 0) {
						this.filmShowList = res.data.showList
					}else {
						this.$util.msg(res.msg)
					}
				}, error => {})
			},
			toMap(){
				uni.openLocation({
					latitude: Number(this.data.latitude),
					longitude: Number(this.data.longitude),
					name: this.data.cinemaName,
					address: this.data.cinemaAddress,
					success:res=>{
					},
					fail:err=>{
					}
				});
			},
			toChooseCinema(){
				uni.navigateBack()
			},
		},
		
		onLoad(option) {
			this.id = option.id
			if(option.distanceText){
				this.distanceText = option.distanceText
			}
			if(option.filmid){
				this.getDetail(option.filmid)
			}else {
				this.getDetail()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.nav {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		background: url(https://qiniu-cdn.maeiyun.com/imgs/indexbg.png) no-repeat 0 0;
		z-index: 99;
		padding-top: var(--status-bar-height);
	}
	.schedling {
		min-height: 100vh;
		padding: calc(var(--status-bar-height) + 44px) 0 0;
		background: url(https://qiniu-cdn.maeiyun.com/imgs/indexbg.png) no-repeat 0 0;
		background-size: 100%;
	}

	.cinema {
		padding: 30rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 0 0;

		.name {
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.address {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 10rpx 0 20rpx;
		}
		.box {
			max-width: 500rpx;
		}
		.tag {
			display: flex;
			align-items: center;
			
			view {
				box-sizing: border-box;
				color: #333;
				padding: 0 21rpx 0 21rpx;
				text {
					margin-top: 11rpx;
					font-size: 24rpx;
					color: #333333;
					line-height: 33rpx;
				}
				image {
					width: 36rpx;
					height: 36rpx;
				}
			}
		}
	}

	.filmDetail {
		// margin-top: 60rpx;
		padding: 0 0 60rpx 0;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 0 0;
		position: relative;
		.custer {
			position: absolute;
			border: 21rpx solid transparent;
			width: 0;
			height: 37rpx;
			bottom: 0;
			left: 50%;
			transform: translateX(-50%);
			border-bottom: 21rpx solid #FFF;
		}
		

		.film_banner {
			width: 100%;

			image {
				height: 140rpx;
				width: 105rpx;
				margin: 0 10rpx 0 0;
			}

			view {
				height: 140rpx;
				width: 105rpx;
				margin: 0 10rpx 0 0;
			}
		}
	}
	
	.film_text_box {
		background: #FFFFFF;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-bottom: 20rpx;
		padding: 50rpx 0 36rpx;
		border-bottom: 1rpx solid #D6D6D6;
		.film_name {
			font-size: 26rpx;
			color: #333333;
			line-height: 37rpx;
			text {
				margin-left: 12rpx;
				font-size: 32rpx;
				color: #F4AA10;
				line-height: 45rpx;
				i {
					font-size: 22rpx;
					font-style: normal;
				}
			}
		}
		
		.film_text {
			display: flex;
			align-items: center;
			max-width: 70%;
		
			text {
				font-size: 22rpx;
				color: #8D8D8D;
				line-height: 30rpx;
			}
		}
	}
	
	
	.date_tab {
		display: flex;
		align-items: center;
		// width: 1200rpx;
		// justify-content: space-between;
		padding: 0 31rpx;
		background: #FFFFFF;
		border-radius: 0 0 20rpx 20rpx;
		box-sizing: content-box;
		min-width: calc(100% - 62rpx);
	
		view {
			padding: 24rpx 0;
			margin: 0 30rpx 0 0;
			width: 140rpx;
			text-align: center;
			border-bottom: 3px solid #FFF;
		}
	
		#select {
			border-bottom: 3px solid #EF5233;
		}
	}

	.list {
		.item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 30rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			margin-top: 31rpx;

			.left {

				.top,
				.bottom {
					display: flex;
					align-items: center;
				}

				.top {
					view {
						margin-right: 20rpx;
						text {
							font-size: 34rpx;
							font-weight: 600;
							color: #0F0807;
							line-height: 42rpx;
							width: 120rpx;
						}
					}

					text {
						font-size: 26rpx;
						color: #333333;
						line-height: 30rpx;
					}
				}

				.bottom {
					margin-top: 17rpx;

					view {
						font-size: 20rpx;
						color: #888889;
						line-height: 28rpx;
						width: 120rpx;
					}

					text {
						font-size: 22rpx;
						color: #888889;
						line-height: 30rpx;
					}
				}
			}

			.right {
				display: flex;
				align-items: center;

				text {
					font-size: 22rpx;
					color: #EE5232;
					line-height: 30rpx;
				}

				view {
					margin-right: 20rpx;
					width: 90rpx;
					height: 44rpx;
					background: linear-gradient(90deg, #EF5233 0%, #FFB554 100%);
					border-radius: 22rpx;
					text-align: center;
					line-height: 44rpx;
					font-size: 22rpx;
					color: #FFFFFF;
				}
			}
		}
	}

	.banner {
		width: 100%;
		margin-bottom: -100rpx;
		padding: 40rpx 30rpx 25rpx 50rpx;
		position: relative;
		// background: #000;
		overflow: hidden;
		.movie_bg {
			width: 100%;
			height: 100%;
			filter: blur(25px);
			position: absolute;
			top: 0;
			left: 0;
		}
		swiper {
			height: 245rpx !important;
		}
		swiper-item {
			height: 100% !important;
		}
	
		.swiper-item {
		    height: 165rpx;
			width: 220rpx;
		    transition: transform 0.5s ease-in-out;
			transform-origin: 50% 100%;
			transform: scale(0.8);
		    &.active{
				transform: scale(1);
		    }
		}
	}
	
</style>